<template>
<div>
      <HeadNav></HeadNav>
  <div class="box">
     <div class="left_nav">
      <ul>
        <li>
          <svg
            t="1641701518755"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2725"
            width="24"
            height="18"
          >
            <path
              d="M919.2 419.2L531.2 141.6c-11.2-8-26.4-8-36.8 0L104 419.2c-12.8 8.8-6.4 28.8 9.6 28.8H192v432c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16V640h192v240c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16V448h78.4c15.2 0 21.6-20 8.8-28.8z"
              p-id="2726"
            ></path>
          </svg>
          基础设置
        </li>
        <li>
          <svg
            t="1641701816576"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3651"
            width="24"
            height="18"
          >
            <path
              d="M879.914071 232.077336c10.998926 0 19.998047 8.999121 19.998047 19.998047v519.949224c0 10.998926-8.999121 19.998047-19.998047 19.998047H143.985939c-10.998926 0-19.998047-8.999121-19.998047-19.998047v-519.949224c0-10.998926 8.999121-19.998047 19.998047-19.998047h735.928132m0-59.994141H143.985939c-44.195684 0-79.992188 35.796504-79.992188 79.992188v519.949224c0 44.195684 35.796504 79.992188 79.992188 79.992188h735.928132c44.195684 0 79.992188-35.796504 79.992188-79.992188v-519.949224c0-44.195684-35.796504-79.992188-79.992188-79.992188z"
              p-id="3652"
            ></path>
            <path
              d="M606.540768 661.035446l-229.27761-92.990919-233.277219 161.984181v41.995899h735.928132v-376.963187z"
              p-id="3653"
            ></path>
            <path
              d="M290.971585 352.065619c22.097842 0 39.996094 17.898252 39.996094 39.996094s-17.898252 39.996094-39.996094 39.996094-39.996094-17.898252-39.996094-39.996094 17.898252-39.996094 39.996094-39.996094m0-59.994142c-55.19461 0-99.990235 44.795625-99.990236 99.990236s44.795625 99.990235 99.990236 99.990235 99.990235-44.795625 99.990235-99.990235-44.795625-99.990235-99.990235-99.990236z"
              p-id="3654"
            ></path>
          </svg>
          物流设置
        </li>
        
        <li>
          <svg
            t="1641701816576"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3651"
            width="24"
            height="18"
          >
            <path
              d="M879.914071 232.077336c10.998926 0 19.998047 8.999121 19.998047 19.998047v519.949224c0 10.998926-8.999121 19.998047-19.998047 19.998047H143.985939c-10.998926 0-19.998047-8.999121-19.998047-19.998047v-519.949224c0-10.998926 8.999121-19.998047 19.998047-19.998047h735.928132m0-59.994141H143.985939c-44.195684 0-79.992188 35.796504-79.992188 79.992188v519.949224c0 44.195684 35.796504 79.992188 79.992188 79.992188h735.928132c44.195684 0 79.992188-35.796504 79.992188-79.992188v-519.949224c0-44.195684-35.796504-79.992188-79.992188-79.992188z"
              p-id="3652"
            ></path>
            <path
              d="M606.540768 661.035446l-229.27761-92.990919-233.277219 161.984181v41.995899h735.928132v-376.963187z"
              p-id="3653"
            ></path>
            <path
              d="M290.971585 352.065619c22.097842 0 39.996094 17.898252 39.996094 39.996094s-17.898252 39.996094-39.996094 39.996094-39.996094-17.898252-39.996094-39.996094 17.898252-39.996094 39.996094-39.996094m0-59.994142c-55.19461 0-99.990235 44.795625-99.990236 99.990236s44.795625 99.990235 99.990236 99.990235 99.990235-44.795625 99.990235-99.990235-44.795625-99.990235-99.990235-99.990236z"
              p-id="3654"
            ></path>
          </svg>
          管理员管理
        </li>
        
        <li>
          <svg
            t="1641701816576"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3651"
            width="24"
            height="18"
          >
            <path
              d="M879.914071 232.077336c10.998926 0 19.998047 8.999121 19.998047 19.998047v519.949224c0 10.998926-8.999121 19.998047-19.998047 19.998047H143.985939c-10.998926 0-19.998047-8.999121-19.998047-19.998047v-519.949224c0-10.998926 8.999121-19.998047 19.998047-19.998047h735.928132m0-59.994141H143.985939c-44.195684 0-79.992188 35.796504-79.992188 79.992188v519.949224c0 44.195684 35.796504 79.992188 79.992188 79.992188h735.928132c44.195684 0 79.992188-35.796504 79.992188-79.992188v-519.949224c0-44.195684-35.796504-79.992188-79.992188-79.992188z"
              p-id="3652"
            ></path>
            <path
              d="M606.540768 661.035446l-229.27761-92.990919-233.277219 161.984181v41.995899h735.928132v-376.963187z"
              p-id="3653"
            ></path>
            <path
              d="M290.971585 352.065619c22.097842 0 39.996094 17.898252 39.996094 39.996094s-17.898252 39.996094-39.996094 39.996094-39.996094-17.898252-39.996094-39.996094 17.898252-39.996094 39.996094-39.996094m0-59.994142c-55.19461 0-99.990235 44.795625-99.990236 99.990236s44.795625 99.990235 99.990236 99.990235 99.990235-44.795625 99.990235-99.990235-44.795625-99.990235-99.990235-99.990236z"
              p-id="3654"
            ></path>
          </svg>
          交易设置
        </li>
        
      </ul>
    </div>
         <div class="right_nav">
      <div class="header">
        <p>后台首页 <i></i> <span>基础设置</span></p>
      </div>
      <div class="head">
        <ul>
          <li>注册与访问</li>
          <li>上传设置</li>
          <li>Api安全</li>
        </ul>
      </div>
    <div class="main">
        <section>
            是否允许注册会员
            <p>  
            <span>是</span>
            <span>否</span>
            </p>
        </section>
        <section>
            注册类型
            <p>  
            <span>普通注册</span>
            <span>手机注册</span>
            </p>
        </section>
        <section>
            
            <p>  
            密码最小长度
            <input type="number">
            </p>
        </section>
        <section>
            强制密码复杂度
            <p>  
            <span>数字</span>
            <span>小写字母</span>
            <span>大写字母</span>
            <span>符号</span>
            </p>
        </section>
        <button>
            保存
        </button>
    </div>
    
  </div>
</div>
</div>

   
</template>

<script>
import HeadNav from '../../components/HeaderNav.vue'
export default {
  components:{
    HeadNav,
  },
  setup() {},
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
}
.left_nav {
  width: 190px;
  height: 865px;
  border-right: 1px solid rgb(223, 223, 223);
}
.left_nav > ul li {
  padding: 20px;
  font-size: 14px;
  vertical-align: top;
}
.left_nav > ul li:hover {
  background: rgb(240, 240, 240);
}
.right_nav {
  width: 100%;
}
.right_nav .header {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid rgb(223, 223, 223);
  padding: 20px;
}
.right_nav .header p {
  color: #000;
  font-weight: 700px;
  font-size: 16px;
}
.right_nav .header p span {
  font-weight: 400px;
  color: rgb(161, 161, 161);
  padding-left: 10px;
}
.right_nav .header p i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-color: transparent transparent #ccc #ccc;
  transform: rotate(225deg);
}
.right_nav .head {
  width: 100%;
  height: 40px;
  padding: 0 20px;
}
.right_nav .head ul {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid rgb(223, 223, 223);
}
.right_nav .head ul li {
  float: left;
  height: 100%;
  line-height: 40px;
  margin-right: 30px;
  font-size: 14px;
}
.right_nav .head ul li:hover {
  color: rgb(66, 110, 75);
}
.main{
    padding: 20px;
    width: 100%;
    height: 100%;
    font-size: 16px;
}
section{
    margin: 40px 0;
}
section:nth-child(1) p{
    display:inline-block;
    border: 1px solid rgb(212, 211, 211);
    border-radius: 5px;
    overflow: hidden;
    vertical-align: top;
}
section:nth-child(1) span{
    width: 30px;
    height: 20px;
    color: #fff;
    padding: 0 10px;  
}
section:nth-child(1) span:nth-child(1){
    background: rgb(30, 223, 207);
    color: #fff;  
}
section:nth-child(1) span:nth-child(2){
    background: #fff;
    color: #ccc; 
}
section:nth-child(2){
padding-left: 62px;
}
section:nth-child(2) p{
    display:inline-block;
    border: 1px solid rgb(212, 211, 211);
    border-radius: 5px;
    overflow: hidden;
    vertical-align: top;
}
section:nth-child(2) span{
    width: 30px;
    height: 20px;
    color: #fff;
    padding: 0 10px;  
}
section:nth-child(2) span:nth-child(1){
    background: rgb(30, 223, 207);
    color: #fff;  
}
section:nth-child(2) span:nth-child(2){
    background: #fff;
    color: #ccc; 
}
section:nth-child(3){
    padding-left: 28px;
}
section:nth-child(3) input{
    width: 300px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-left: 20px;
}
section:nth-child(4){
    margin-left: 14px;
}
section:nth-child(4) p{
    display:inline-block;
    border: 1px solid rgb(212, 211, 211);
    border-radius: 5px;
    overflow: hidden;
    vertical-align: top;
}
section:nth-child(4) span{
    width: 30px;
    height: 25px;
    color: #fff;
    padding: 0 10px;  
}
section:nth-child(4) span:nth-child(1){
    background: rgb(30, 223, 207);
    color: #fff;  
}
section:nth-child(4) span:nth-child(2){
    background: #fff;
    color: #ccc; 
}
section:nth-child(4) span:nth-child(3){
    background: #fff;
    color: #ccc; 
}
section:nth-child(4) span:nth-child(4){
    background: #fff;
    color: #ccc; 
}
button{
    width: 60px;
    height: 25px;
    color: #fff;
    padding: 0 10px; 
    background: rgb(30, 223, 207);
    border:none;
    border-radius: 5px;
    margin-left: 200px;
}
</style>